<template>
    <div class="main">
        <headNav title="个人信息"></headNav>
        <div>
            <div class="oneRow" @click="toChangeImg">
                <div class="imgBox">
                    <img v-if="headImg == 'null' || !headImg" src="@/assets/img/default_head.png" alt="">
                    <img v-else :src="headImg" alt="" onerror="this.src = 'static/img/default_head.png'">
                </div>
                <span class="infoValue">
                    <img src="@/assets/img/a-r.png" alt="">
                </span>
            </div>
            <div class="infoRow">
                <span>
                    姓名
                </span>
                <span class="infoValue">
                    {{name}}
                </span>
            </div>
            <div class="infoRow">
                <span>
                    手机号码
                </span>
                <span class="infoValue">
                    {{cellPhone}}
                </span>
            </div>
            <div class="infoRow" @click="toChangePass">
                <span>
                    修改密码
                </span>
                <span class="infoValue">
                    <img src="@/assets/img/a-r.png" alt="">
                </span>
            </div>
        </div>
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav'
import { Group, XInput  } from 'vux'
export default {
    components: {
        headNav, Group, XInput
    },
    data () {
        return {
           
        }
    },
    computed: {
        headImg () {
            return this.$store.state.user.headImg    
        },
        roleCode () {
             return this.$store.state.user.roleCode
        },
        cellPhone () {
            return this.$store.getters['user/cellPhoneNum']
        },
        name () {
            return this.$store.getters['user/realName']
        }
    },
    mounted () {
        console.log(this.headImg)
    },
    methods: {
        toChangePass () {
            this.$router.push('changePassWord')
        },
        toChangeImg () {
            this.$router.push('changeImg')
        }
    }
}
</script>
<style lang="less" scoped>
    .main{
        background: #fff;
    }
    .oneRow{
        padding: 0.1rem 0.4rem 0.1rem 0.2rem;
        border-bottom: 0.01rem solid #dedede;
        >.imgBox{
            display: inline-block;
            width: 1rem;
            height: 1rem;
            >img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
                object-fit: cover;
            }
        }
        .infoValue{
            color: #999;
            float: right;
            margin-top: 0.32rem;
            img{
                height: 0.3rem;
                vertical-align: middle;
            }
        }
    }
    .infoRow{
        padding: 0.2rem 0.4rem 0.2rem 0.2rem;
        border-bottom: 0.01rem solid #dedede;
        font-size: 0.32rem;
        .infoValue{
            color: #999;
            float: right;
            img{
                height: 0.3rem;
                vertical-align: middle;
            }
        }
    }
</style>
